<template>
  <div class="my-message">
    <ul>
      <li v-for="(item,index) in infoList" :key="item.id">
        <h2 class="reply-status">您的意见反馈已被回复您的意见反馈已被回复您的意见反馈已被回复您的意见反馈已被回复您的意见反馈已被回复您的意见反馈已被回复</h2>
        <p class="reply-time">6-24 8:30</p>
        <h2 class="feedback-title">反馈内容：</h2>
        <p class="feedback-con">你们的课程包太少了，可不可以多上一点课程包呢？你们的课程包太少了，可不可以多上一点课程包呢？你们的课程包太少了，可不可以多上一点课程包呢？你们的课程包太少了，可不可以多上一点课程包呢？</p>
        <h3 class="show" @click="lookAll(index)">展开查看全部<img src="../../assets/images/down-gray.png"></h3>
        <div class="hide-con" v-if="item.isShow">
          <p class="time">【2019.01.01】</p>
          <h3 class="back-title">尊敬的用户：</h3>
          <p class="write-back">非常感谢您的反馈，现有课包内容包含了听、说、读、写，请您根据自家孩子的情况自主选择课程学习。另外我们的教研老师也在潜心制作新的课程内容，请你持续关注公众号以获取一手课程上新通知哦~</p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      infoList:[
        {isShow:false},{isShow:false},{isShow:false},{isShow:false},{isShow:false}
      ]
    };
  },
  methods:{
    lookAll(index) {
      var list = this.infoList
      this.infoList[index].isShow=!list[index].isShow
    }
  }
};
</script>
<style lang="scss" scoped>
.my-message {
  ul {
    li {
      background: #fff;
      padding: 0.2rem 0.3rem;
      margin-bottom: .30rem;
      h2.reply-status {
        font-size: 0.32rem;
        color: #333;
        margin-bottom: 0.2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      p.reply-time {
        font-size: 0.28rem;
        color: #999;
      }
      h2.feedback-title {
        font-size: .28rem;
        color: #333;
        margin-top: .10rem;
        margin-bottom: .10rem;
      }
      p.feedback-con {
        font-size: .28rem;
        color: #999;
      }
      h3.show {
        color: #666;
        font-size: .28rem;
        margin-top: .10rem;
        margin-bottom: .10rem;
        img {
          width: .15rem;
          height: .10rem;
          margin-left: .05rem;
        }
      }
      .hide-con {
        p.time {
          font-size: .28rem;
          color: #999;
          margin-bottom: .20rem;
        }
        h3.back-title {
          font-size: .28rem;
          color: #333;
          margin-bottom: .10rem;
        }
        p.write-back {
          font-size: .28rem;
          color: #999;
          line-height: 160%;
        }

      }
    }
  }
}
</style>


